<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 精选题库 -->
      <el-card shadow="never">

        <!-- 表单部分 -->
          <search-header @search="search">
          </search-header>
        <!-- tabs标签页 -->
        <div class="btn-tabs">
          <template>
            <el-tabs v-model="chkState" type="card" @tab-click="handleClick">
              <el-tab-pane label="全部" name="all">

              </el-tab-pane>
              <el-tab-pane label="待审核" name="0">

                </el-tab-pane>
              <el-tab-pane label="已审核" name="1">

                </el-tab-pane>
              <el-tab-pane label="已拒绝" name="2">

              </el-tab-pane>
            </el-tabs>
                  <el-alert
                    :title="`数据一共${total}条`"
                    type="info"
                    show-icon
                    :closable="false">
                  </el-alert>
          </template>
        </div>

        <!-- 表格数据 -->
        <el-table v-if="tableData.length" :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
          <el-table-column prop="subject" label="学科" width="120"></el-table-column>
          <el-table-column prop="catalog" label="目录" width="120"></el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
            <template v-slot="{row}">
              {{ questionType[row.questionType-1].label }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="300">

          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="200"></el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template v-slot="{row}">
              {{ difficulty[row.difficulty-1].label  }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
            <template v-slot="{row}">
              {{ chkType[row.chkState].label }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="200"></el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120">
            <template v-slot="{row}">
              {{ publishState[row.publishState].label }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template v-slot="{row}">
              <el-button @click="handPreview(row)" type="text" size="small">预览</el-button>
              <el-button type="text" size="small" @click="handCheck(row)" :disabled="row.chkState===1">审核</el-button>
              <el-button type="text" size="small" :disabled="row.publishState===1" @click="handChange(row)">修改</el-button>
              <el-button type="text" size="small" @click="handOpen(row,str)">
                {{str = row.publishState === 1?'下架':'上架'}}
              </el-button>
              <el-button type="text" size="small" @click="handDel(row)" :disabled="row.publishState===1">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 翻页器 -->

        <div class="footer-pagination">
            <page-tool
            ref="tool"
             :total="total"
            :paginationPage="queryObj.page"
            :paginationPagesize="queryObj.pagesize"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange" >
            </page-tool>
        </div>
      </el-card>
    </div> <!-- 预览 -->
      <articles-preview
      :articleDialog.sync="articleDialog"
      :titlePreview="titlePreview">
        </articles-preview>
        <!--审查  -->
        <questions-check
        ref="questionsCheck"
        :cur-id="curId"
        :isQuestions.sync="isQuestions"
        :titlePreview="titlePreview"
        @getChoice="getChoice">
        </questions-check>
  </div>
</template>

<script>
import { questionType, difficulty, chkType, publishType as publishState, status } from '@/api/hmmm/constants.js'
import { choice, detail, remove, choicePublish } from '@/api/hmmm/questions.js'
import ArticlesPreview from '../components/articles-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'
import SearchHeader from '../components/common/search-header.vue'
import PageTool from '../../module-dashboard/components/pageTool.vue'

export default {
  components: { ArticlesPreview, QuestionsCheck, SearchHeader, PageTool },

  data () {
    return {
      num: '',
      questionType,
      difficulty,
      chkType,
      publishState,
      status,
      chkState: 'all',
      formInline: {
        user: '',
        region: ''
      },
      activeName: 'first',
      total: 0,
      // 主页题库数据
      tableData: [],
      // 题库详情页数据
      titlePreview: {},
      queryObj: {
        pagesize: 10,
        page: 1
      },

      isDisabled: false,
      articleDialog: false,
      isQuestions: false,
      // isShowDialog: false
      // totalCount:
      curId: -1

    }
  },
  computed: {

  },
  created () {
    this.getChoice()
    // console.log(this.tableData)
  },
  methods: {
    // tab栏切换
    handleClick () {
      if (this.chkState === 'all') {
        delete this.queryObj.chkState
        this.queryObj.page = 1
        this.queryObj.pagesize = 10
        this.getChoice()
      } else {
        this.queryObj.chkState = this.chkState
        this.getChoice()
      }
    },
    handleSizeChange (val) {
      this.queryObj.pagesize = val
      this.getChoice()
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.queryObj.page = val
      this.getChoice()
    },
    // 搜索
    search (data) {
      this.queryObj = {
        ...data,
        pagesize: 10,
        page: 1
      }
      this.getChoice()
    },
    // 预览
    async handPreview (row) {
      this.articleDialog = true
      const res = await detail(row)

      console.log(res)
      this.titlePreview = res.data
    },
    // 审查
    async handCheck (row) {
      this.$refs.questionsCheck.clear()
      this.isQuestions = true
      this.curId = row.id
    },
    // 修改
    handChange ({ id }) {
      // this.$router.push('/questions/new')
      this.$router.push(`new/${id}`)
    },
    // 上架
    handOpen (row, str) {
      this.$confirm(`您确认${str = row.publishState === 0 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        row.publishState = row.publishState === 1 ? 0 : 1
        await choicePublish(row)
        this.$message({ type: 'success', message: `${str}成功!` })
        this.getChoice()
      }).catch()
    },
    // 删除
    async handDel (row) {
      await this.$confirm('您确定删除这道题吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(row)
      this.$message({ type: 'success', message: '删除成功!' })
      if (this.tableData.length === 1 && this.queryObj.page > 1) {
        this.queryObj.page--
      }
      this.getChoice()
    },
    // 渲染
    async getChoice () {
      const res = await choice(this.queryObj)
      this.tableData = res.data.items.map(i => {
        i.question = i.question.replace(/<.+?>/g, '')
        return i
      })
      // console.log(this.tableData)

      this.total = res.data.counts
      this.id = res.data.items.id
    }
  }
}
</script>

<style scoped lang="scss">
.btn-header{
    margin-bottom: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    .explain{
      font-size: 12px;
      color: pink;
    }
}
.btn-tabs{
    margin-bottom: 15px;
}
.footer-pagination{
    margin-top: 20px;
    text-align: right;
}
::v-deep .el-pagination__jump {
    margin-left: 0px;

}
.el-form-item{
  display: flex;justify-content: flex-end;
  .el-input{
    width: 200px;
  }
  .el-select{
    width: 200px;
  }
}
</style>
